<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>

    <style>
        #app {
            padding: 20px;
            position: relative;
        }
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .content {
            margin-top: 20px;
        }
        .add {
            font-size: 16px;
            display: inline-block;
            padding: 4px 10px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            margin-right: 20px;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 20px;

        }
        table {
            text-align: center;
            width: 98%;
            border: 1px solid #dff2f2;
            border-collapse:collapse;
            border-top: 0;
        }
        tr {
            width: 100%;
            font-size: 15px;
        }
        tr span {
            cursor: pointer;
        }
        tr:nth-child(odd) {
            background-color: #dff2f2;
        }
        tr:last-child {
            border-bottom: 0;
        }
        th {
            background-color: #68cacb;
            line-height: 39px;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }
        td {
            line-height: 39px;
        }
        label {
            cursor: pointer;
            margin: 0;
        }
        .title {
            width: 40%;
            text-align: left;
            text-indent: 50px;
        }
        .time {
            width: 20%;
        }
        .operate {
            width: 30%;
        }
        .right_cont_container {
            padding: 20px;
        }
        #demo2 {
            margin-top: 20px;
        }
        .hasdata {
            text-align: center;
            margin-top: 210px;
        }
        .none {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>住院通</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>健康教育</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>{{deptName}}新闻</span>
                    </div>
                    <div class="content">
                        <div class="top-row">
                            <div class="top-right">
                                <div class="add" @click="add()">添加</div>
                            </div>
                        </div>
                        <div class="pushed-box none" :class="{'show': !nodataa}">
                            <table>
                                <tr>
                                    <th class="title">标题</th>
                                    <th class="time">时间</th>
                                    <th class="operate">操作</th>
                                </tr>
                                <tr v-for="(index,news) in newsList">
                                    <td style="text-align:left;padding-left:10px">{{news.title}}</td>
                                    <td>{{news.time}}</td>
                                    <td><span @click="edit(news.news_id)">修改/</span><span @click="del(news.news_id,index)">删除</span></td>
                                </tr>
                            </table>
                            <%--分页插件=====已发布--%>
                            <div id="demo2"></div>
                        </div>
                        <div class="hasdata none" :class="{'show': nodataa}">
                            <img src="../img/nodata.png">
                            <div>暂时没有数据</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            catagory: 0,
            totalPage: 0,
            newsList: [],
            nodataa: false,
            deptName: "",
        },
        ready: function() {         //页面初始化，请求未推送列表数据并拼接
            var _this = this;
            var urlText = location.search.split("&");
            _this.catagory = urlText[0].substr(4);
            var name = urlText[1].substr(5);
            _this.deptName = decodeURI(name);
            $.ajax({
                type: 'POST',
                url: "newsList.jsp",
                data: {
                    act: "news_list",
                    category: _this.catagory,
                    hospital: "1111",
                    page: "1",
                    item_count: 10
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        _this.totalPage = [];
                        _this.newsList = 0;
                        _this.totalPage = res.data.page_count;
                        _this.newsList = res.data.rank;
                        //console.log(_this.newsList);
                        if(_this.newsList.length == 0) {
                            _this.nodataa = true;
                        } else {
                            _this.nodataa = false;
                        }
                        layui.use(['laypage', 'layer'], function(){
                            var laypage = layui.laypage;
                            layer = layui.layer;
                            laypage({
                                cont: 'demo2',
                                pages: _this.totalPage,
                                groups: 5,
                                jump: function(obj, first){
                                    var curr = obj.curr;
                                    $.ajax({
                                        type: 'POST',
                                        url: "newsList.jsp",
                                        data: {
                                            act: "news_list",
                                            page: curr + "",
                                            category: _this.catagory,
                                            hospital: "1111",
                                            item_count: 10
                                        },
                                        success: function(res) {
                                            //console.log(res);
                                            res = JSON.parse(res);
                                            _this.totalPage = [];
                                            _this.newsList = 0;
                                            _this.totalPage = res.data.page_count;
                                            _this.newsList = res.data.rank;
                                            if(_this.newsList.length == 0) {
                                                _this.nodata = true;
                                            } else {
                                                _this.nodata = false;
                                            }
                                        }
                                    })
                                }
                            })
                        })
                    }
                }
            })
        },
        methods: {                          //因为笔者比较菜，所以下面有些分页调用时的代码重复了
            add: function() {
                window.location.href = "add.jsp?id=" + this.catagory + "&name=" + this.deptName;
            },
            edit: function(id) {
                window.location.href = "edit.jsp?id=" + id;
            },
            del: function(id,delindex) {
                var _this = this;
                layer.open({
                    content: '您确定需要删除吗？',
                    btn: ['确定', '取消'],
                    yes: function(index, layero){
                        eeesysLoading();
                        $.ajax({
                            type: 'POST',
                            url: 'newsList.jsp',
                            data: {
                                act: "delete_news",
                                hospital: "1111",
                                news_id: id,
                            },
                            success: function (res) {
                                eeesysLoadingCancel();
                                //console.log(res);
                                res = JSON.parse(res);
                                if(res.errcode == 0) {
                                    layer.open({
                                        title: '提示',
                                        content: '删除成功!'
                                    });
                                    _this.newsList.splice(delindex,1);
                                    if(_this.newsList.length == 0) {
                                        window.location.reload();
                                    }
                                } else {
                                    layer.open({
                                        title: '提示',
                                        content: res.errmsg
                                    })
                                }
                            }
                        })
                        layer.close(index);
                    }
                });
            }
        },
        events: {


        }

    })
</script>
<script src="../layui/layui.js"></script>